<template>
	<ge-page id="ge-page" :vanNavBarObj="vanNavBarObj">
		<view class="category-container">
			<!-- 左侧分类导航 -->
			<view class="category-sidebar">
				<van-sidebar :active-key="activeCategory" @change="onCategoryChange">
					<van-sidebar-item 
						v-for="(category, index) in categories" 
						:key="index"
						:title="category.title"
						:name="index"
					/>
				</van-sidebar>
			</view>
			
			<!-- 右侧服务内容 -->
			<view class="category-content">
				<view class="service-grid">
					<view 
						v-for="(service, index) in currentServices" 
						:key="index"
						class="service-item"
						@click="onServiceClick(service)"
					>
						<view class="service-image">
							<image :src="service.image" mode="aspectFill" />
						</view>
						<view class="service-title">{{service.title}}</view>
					</view>
				</view>
			</view>
		</view>
	</ge-page>
</template>

<script>
export default {
	data() {
		return {
			vanNavBarObj: {
				title: '服务分类',
				hideLeftArrow: true
			},
			activeCategory: 0,
			categories: [
				{ title: '家电', key: 'appliance' },
				{ title: '居家', key: 'home' },
				{ title: '洗护', key: 'cleaning' },
				{ title: '数码', key: 'digital' },
				{ title: '房屋', key: 'house' },
				{ title: '商业', key: 'business' },
				{ title: '其他', key: 'others' }
			],
			services: {
				appliance: [
					{
						title: '空调维修',
						image: 'https://images.unsplash.com/photo-1585338447937-7c77ef363146?w=400&h=300&fit=crop',
						description: '专业空调维修服务'
					},
					{
						title: '冰箱维修',
						image: 'https://images.unsplash.com/photo-1571175351289-9896c6cb7ed9?w=400&h=300&fit=crop',
						description: '冰箱故障维修'
					},
					{
						title: '洗衣机维修',
						image: 'https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?w=400&h=300&fit=crop',
						description: '洗衣机维修保养'
					},
					{
						title: '电视维修',
						image: 'https://images.unsplash.com/photo-1593784991095-a205069470b6?w=400&h=300&fit=crop',
						description: '电视机维修服务'
					},
					{
						title: '热水器维修',
						image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop',
						description: '热水器安装维修'
					},
					{
						title: '厨房家电',
						image: 'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=400&h=300&fit=crop',
						description: '厨房电器维修'
					}
				],
				home: [
					{
						title: '家具安装',
						image: 'https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop',
						description: '家具组装安装'
					},
					{
						title: '灯具安装',
						image: 'https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?w=400&h=300&fit=crop',
						description: '灯具安装维修'
					},
					{
						title: '窗帘安装',
						image: 'https://images.unsplash.com/photo-1586105251261-72a756497a11?w=400&h=300&fit=crop',
						description: '窗帘测量安装'
					},
					{
						title: '搬家服务',
						image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop',
						description: '专业搬家服务'
					}
				],
				cleaning: [
					{
						title: '家庭清洁',
						image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop',
						description: '专业家庭清洁'
					},
					{
						title: '深度保洁',
						image: 'https://images.unsplash.com/photo-1527515637462-cff94eecc1ac?w=400&h=300&fit=crop',
						description: '深度清洁服务'
					},
					{
						title: '开荒保洁',
						image: 'https://images.unsplash.com/photo-1581578731548-c64695cc6952?w=400&h=300&fit=crop',
						description: '新房开荒保洁'
					},
					{
						title: '地毯清洗',
						image: 'https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop',
						description: '专业地毯清洗'
					}
				],
				digital: [
					{
						title: '手机维修',
						image: 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=400&h=300&fit=crop',
						description: '手机维修服务'
					},
					{
						title: '电脑维修',
						image: 'https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=400&h=300&fit=crop',
						description: '电脑维修升级'
					},
					{
						title: '数据恢复',
						image: 'https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=400&h=300&fit=crop',
						description: '数据恢复服务'
					},
					{
						title: '网络安装',
						image: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=400&h=300&fit=crop',
						description: '网络安装调试'
					}
				],
				house: [
					{
						title: '水电维修',
						image: 'https://images.unsplash.com/photo-1621905251189-08b45d6a269e?w=400&h=300&fit=crop',
						description: '水电安装维修'
					},
					{
						title: '油漆粉刷',
						image: 'https://images.unsplash.com/photo-1589939705384-5185137a7f0f?w=400&h=300&fit=crop',
						description: '墙面粉刷装修'
					},
					{
						title: '防水补漏',
						image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop',
						description: '防水补漏服务'
					},
					{
						title: '瓷砖美缝',
						image: 'https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop',
						description: '瓷砖美缝服务'
					}
				],
				business: [
					{
						title: '办公设备',
						image: 'https://images.unsplash.com/photo-1497032628192-86f99bcd76bc?w=400&h=300&fit=crop',
						description: '办公设备维修'
					},
					{
						title: '监控安装',
						image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop',
						description: '监控系统安装'
					},
					{
						title: '网络布线',
						image: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=400&h=300&fit=crop',
						description: '网络布线工程'
					},
					{
						title: 'POS机维修',
						image: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop',
						description: 'POS收银系统'
					}
				],
				others: [
					{
						title: '开锁服务',
						image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop',
						description: '24小时开锁'
					},
					{
						title: '管道疏通',
						image: 'https://images.unsplash.com/photo-1621905251189-08b45d6a269e?w=400&h=300&fit=crop',
						description: '管道疏通清洁'
					},
					{
						title: '除甲醛',
						image: 'https://images.unsplash.com/photo-1527515637462-cff94eecc1ac?w=400&h=300&fit=crop',
						description: '室内除甲醛'
					},
					{
						title: '消毒杀菌',
						image: 'https://images.unsplash.com/photo-1584464491033-06628f3a6b7b?w=400&h=300&fit=crop',
						description: '环境消毒服务'
					}
				]
			}
		}
	},
	computed: {
		currentServices() {
			const categoryKey = this.categories[this.activeCategory]?.key || 'appliance'
			return this.services[categoryKey] || []
		}
	},
	methods: {
		/**
		 * 分类切换
		 */
		onCategoryChange(index) {
			this.activeCategory = index
		},
		
		/**
		 * 服务点击
		 */
		onServiceClick(service) {
			uni.dialog.confirm({
				title: service.title,
				message: service.description + '\n\n是否需要预约此服务？',
			})
			.then(() => {
				uni.toast(`预约${service.title}成功！`)
			})
			.catch(() => {
				// 用户取消
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.category-container {
	display: flex;
	height: 100vh;
	background: #f5f5f5;
}

.category-sidebar {
	width: 100px;
	background: #fff;
	border-right: 1px solid #eee;
}

.category-content {
	flex: 1;
	padding: 20px;
	overflow-y: auto;
}

.service-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
}

.service-item {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	
	&:active {
		transform: scale(0.98);
	}
	
	.service-image {
		height: 120px;
		overflow: hidden;
		
		image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	
	.service-title {
		padding: 12px 15px;
		font-size: 14px;
		font-weight: 500;
		color: #333;
		text-align: center;
		line-height: 1.4;
	}
}

/* Vant组件样式自定义 */
::v-deep .van-sidebar {
	height: 100%;
	
	.van-sidebar-item {
		font-size: 14px;
		
		&--select {
			color: #1989fa;
			border-right: 3px solid #1989fa;
		}
	}
}

/* 响应式设计 */
@media (max-width: 480px) {
	.category-sidebar {
		width: 80px;
	}
	
	.category-content {
		padding: 15px;
	}
	
	.service-grid {
		gap: 12px;
	}
	
	.service-item {
		.service-image {
			height: 100px;
		}
		
		.service-title {
			padding: 10px;
			font-size: 13px;
		}
	}
}
</style>